<!--素材选择器-->
<template>
  <div class="materialSelection-container">
    <el-tabs v-model="activeName" class="common-tabs" @tab-click="handleTabClick">
      <el-tab-pane name="text">
        <span slot="label"><i class="el-icon-notebook-2" /> 文本</span>
      </el-tab-pane>
      <el-tab-pane name="image">
        <span slot="label"><i class="el-icon-picture" /> 图片</span>
      </el-tab-pane>
      <el-tab-pane name="audio">
        <span slot="label"><i class="el-icon-microphone" /> 语音</span>
      </el-tab-pane>
      <el-tab-pane name="video">
        <span slot="label"><i class="el-icon-video-play" /> 视频</span>
      </el-tab-pane>
      <el-tab-pane name="imageText">
        <span slot="label"><i class="el-icon-takeaway-box" /> 图文</span>
      </el-tab-pane>
    </el-tabs>

    <div class="flex-main content-selection-container">
      <div style="margin-bottom: 20px">
        <el-button type="primary" plain @click="handleSelectMaterial">素材库选择</el-button>
      </div>
      <div>
        <el-form
          ref="dataForm"
          :model="autoReplyRecord">
          <template v-if="activeName==='text'">
            <el-input
              v-model="autoReplyRecord.textContent"
              :rows="4"
              type="textarea"
              maxlength="500"
              show-word-limit
              placeholder="请输入文本内容" />
          </template>
          <template v-else-if="activeName==='image'">
            <div v-if="autoReplyRecord.title" class="common-flow-container">
              <div class="flow-item tc">
                <el-image
                  :src="autoReplyRecord.fileUrl"
                  style="border-radius: 5px;margin-top: 10px;"
                  :preview-src-list="[autoReplyRecord.fileUrl]">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div style="font-size: 15px;font-weight: bold;">{{ autoReplyRecord.title }}</div>
              </div>
            </div>
          </template>
          <template v-else-if="activeName==='audio' || activeName==='video'">
            <el-form-item label="标题:" prop="title">
              <el-input v-model="autoReplyRecord.title" maxlength="30" show-word-limit placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题" />
            </el-form-item>
            <el-form-item label="描述:" prop="content">
              <el-input
                v-model="autoReplyRecord.textContent"
                :rows="4"
                type="textarea"
                maxlength="500"
                show-word-limit
                placeholder="标题将展示在相关播放页面，建议填写简洁明确，有信息量的内容" />
            </el-form-item>
          </template>
          <template v-else>
            <div v-if="autoReplyRecord.articleContents.length>0" class="common-flow-container">
              <div v-for="item in autoReplyRecord.articleContents" :key="item.articleId" class="flow-item tc">
                <el-image
                  :src="common.getFileView(item.photo)"
                  style="border-radius: 4px 4px 0 0;"
                  :preview-src-list="[common.getFileView(item.photo)]">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div style="font-size: 15px;font-weight: bold;">{{ item.title }}</div>
              </div>
            </div>
          </template>
        </el-form>
      </div>

    </div>
    <model-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :show-close="false"
      @close="dialogVisible=!dialogVisible">
      <template v-if="activeName==='imageText'">
        <image-text mode="select" :app-id="appId" @select="handleSelectValue" />
      </template>
      <template v-else>
        <material-library mode="select" :type="activeName" :app-id="appId" @select="handleSelectValue" />
      </template>
    </model-dialog>
  </div>
</template>
<script>
/**
 * 有点小问题，待修复，新增回显问题
 */
import materialLibrary from '../materialLibrary.vue'
import imageText from '../imageText/index.vue'

export default {
  components: { materialLibrary, imageText },
  props: {
    value: {
      type: String,
      required: false,
      default: null
    },
    appId: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      activeName: 'text',
      dialogVisible: false,
      dialogTitle: '选择文本',
      materials: [],
      autoReplyRecord: {
        resourceType: 3
      }
    }
  },
  watch: {
    activeName: function(val) {

    },
    value: function(val) {
      this.analysisValue()
    }
  },
  methods: {
    handleTabClick() {
      if (this.activeName === 'text') {
        this.dialogTitle = '选择文本'
        this.autoReplyRecord = {
          resourceType: 3
        }
      }
      if (this.activeName === 'image') {
        this.dialogTitle = '选择图片'
        this.autoReplyRecord = {
          resourceType: 0
        }
      }
      if (this.activeName === 'audio') {
        this.dialogTitle = '选择语音'
        this.autoReplyRecord = {
          resourceType: 1
        }
      }
      if (this.activeName === 'video') {
        this.dialogTitle = '选择视频'
        this.autoReplyRecord = {
          resourceType: 2
        }
      }
      if (this.activeName === 'imageText') {
        this.dialogTitle = '选择图文'
        this.autoReplyRecord = {
          resourceType: 4,
          articleContents: []
        }
      }
      this.$emit('input', '')
    },
    handleSelectMaterial() {
      this.dialogVisible = true
    },
    fetchData() {
      this.$store.dispatch('thirdWechatMenuArticleGetByMenuId', 1).then((res) => {
        this.materials = res
      }).catch((_) => {})
    },
    handleSelectValue(val) {
      this.dialogVisible = false
      var resourceType = this.autoReplyRecord.resourceType
      if (resourceType === 3) {
        // 文本
        this.autoReplyRecord = {
          resourceType: resourceType,
          textContent: val.summary
        }
      }
      if (resourceType === 0) {
        // 图片
        this.autoReplyRecord = {
          resourceType: resourceType,
          title: val.title,
          fileUrl: val.attachment,
          mediaId: val.mediaId
        }
      }
      if (resourceType === 1 || resourceType === 2) {
        // 音频、视频
        this.autoReplyRecord = {
          resourceType: resourceType,
          title: val.title,
          textContent: val.summary,
          mediaId: val.mediaId
        }
      }
      if (resourceType === 4) {
        // 图文
        var articleContents = []
        val.forEach(item => {
          articleContents.push({
            title: item.title,
            textContent: item.summary,
            articleId: item.id,
            photo: item.photo
          })
        })
        this.autoReplyRecord = {
          resourceType: resourceType,
          articleContents: articleContents
        }
      }
      this.$emit('input', JSON.stringify(this.autoReplyRecord))
    },
    getSelectValue() {
      return {
        ...this.autoReplyRecord,
        appId: this.appId
      }
    },
    analysisValue() {
      if (this.value) {
        try {
          var json = JSON.parse(this.value)
          var { resourceType } = json
          this.autoReplyRecord = {
            resourceType: resourceType
          }
          if (resourceType === 3) {
            this.activeName = 'text'

            this.autoReplyRecord = {
              ...this.autoReplyRecord,
              textContent: json.textContent
            }
          }
          if (resourceType === 0) {
            this.activeName = 'image'
            this.autoReplyRecord = {
              ...this.autoReplyRecord,
              title: json.title,
              fileUrl: json.fileUrl,
              mediaId: json.mediaId
            }
          }
          if (resourceType === 1) {
            this.activeName = 'audio'
            this.autoReplyRecord = {
              ...this.autoReplyRecord,
              title: json.title,
              textContent: json.textContent,
              mediaId: json.mediaId
            }
          }
          if (resourceType === 2) {
            this.activeName = 'video'
            this.autoReplyRecord = {
              ...this.autoReplyRecord,
              title: json.title,
              textContent: json.textContent,
              mediaId: json.mediaId
            }
          }
          if (resourceType === 4) {
            this.activeName = 'imageText'
            this.autoReplyRecord = {
              ...this.autoReplyRecord,
              articleContents: json.articleContents
            }
          }
        } catch (err) {
          console.log(err)
        }
      }
    }
  }

}
</script>
<style lang="scss" scoped >
.materialSelection-container{
  .content-selection-container{
      padding: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
